<template>
  <div>
    <el-dialog title="文章详情" :visible.sync="dialogTableVisible">
      <div class="content" v-for="(item,index) in content" :key="index">
        <span v-if="item.type === 'text'">{{item.value}}</span>
        <img v-else :src="item.value" mode="widthFix" style="width: 100%;"/>
        <!-- <rich-text :nodes="detail.content"></rich-text>		 -->

      </div>
    </el-dialog>
    <el-row style="display: flex;justify-content: flex-start;padding-bottom: 5px;margin-top: -20px">
      <span style="width: 80px;padding-left: 10px">标题</span>
      <el-input placeholder="请输入文章标题" size="small" style="width: 250px" v-model="keyword"></el-input>
      <div style="padding-left: 50px">
        <el-button type="primary" size="small" @click="getArticleList(keyword)">搜索</el-button>
      </div>
    </el-row>
    <el-row>
      <el-col :span="7" v-for="(item, index) in pageTicket" :key="index" :offset="index > 0 ? 1 : 0">
        <el-card :body-style="{ padding: '0px' }" >
          <img :src="item.images" class="image" @click="openDialog(item)">
          <div style="padding: 14px;">
            <span>{{item.title}}</span>
            <div class="bottom clearfix">
              <div>
                阅读量：{{item.views}}
              </div>
              <div>
                &nbsp;收藏量：{{item.collection}}
              </div>
              <div>
                &nbsp;点赞量：{{item.likes}}
              </div>
              <div>
                &nbsp;评论量：{{item.comment}}
              </div>
<!--              <time class="time">{{ currentDate }}</time>-->
<!--              <el-button type="text" class="button">操作按钮</el-button>-->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="display: flex;">
      <div style="display: flex; flex-direction: column; width: 100%;margin: 10px">
        <div class="block">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentpage"
              :page-sizes="[3]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "noteData",
  data(){
    return{
      currentDate: new Date(),
      articleList:[],
      currentpage:1,
      pagesize:3,
      total:0,
      pageTicket:[],
      dialogTableVisible:false,
      content:{},
      keyword:''
    }
  },
  mounted() {
    this.getArticleList(1)
  },
  methods:{
    openDialog(item){
      this.dialogTableVisible = true
      console.log(item)
      this.getArticleContent(item)
    },
    handleSizeChange(size){
      //修改当前每页的数据行数
      this.pagesize=size;
      //数据重新分页
      this.getPageInfo();
    },
    //调整当前的页码
    handleCurrentChange(pageNumber){
      //修改当前的页码
      this.currentpage=pageNumber;
      //数据重新分页
      this.getPageInfo()
    },
    getPageInfo(){
      //清空pageTicket中的数据
      this.pageTicket=[];
      // 获取当前页的数据
      for(let i=(this.currentpage-1)*this.pagesize;i<this.total;i++){
        //把遍历的数据添加到pageTicket里面
        this.pageTicket.push(this.articleList[i]);
        //判断是否达到一页的要求
        if(this.pageTicket.length===this.pagesize) break;
      }
      console.log("pageTicket "+this.pageTicket)
    },
    getArticleContent(item){
      this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/getApArticleContent/'+item.id,{

      },{
        headers:{
          'token': localStorage.getItem('token')
        },
      }).then((res)=>{
        console.log(res.data.data)
        this.content = JSON.parse(res.data.data)
      });
    },
    getArticleList(keyword){
      console.log(keyword)
      if(keyword.length > 0){
        this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/getApArticleList/'+keyword,{

        },{
          headers:{
            'token': localStorage.getItem('token')
          },
        }).then((res)=>{
          console.log(res.data.data)
          this.articleList = res.data.data
          this.total = this.articleList.length
          this.getPageInfo()
        });
      }else{
        this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/getApArticleList/'+'all',{

        },{
          headers:{
            'token': localStorage.getItem('token')
          },
        }).then((res)=>{
          console.log(res.data.data)
          this.articleList = res.data.data
          this.total = this.articleList.length
          this.getPageInfo()
        });
      }

    }
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>